<template>
	<div style="margin-left: 5px;">

     <div>
		<div>
				<div >
				 <h3 style="display:inline-block">{{Data.CodeNum}}.</h3> 	<span v-html="Data.Title"  style="display:inline-block"></span>
                    <el-button   @click="divvisibility(2)" type="text"  style="float:right" v-if="!preview">{{see}}</el-button>
				</div>
				<div class="option-area" style="margin: 5px;"  v-if="visible">
                   <el-row>
                    <el-col :span="6" v-bind:key="opt.itemId"  v-for="opt in  Data.Options">
                           
                      
                                <el-table :data="opt.SubItems" style="width: 100%">
                                    <el-table-column >
                                        
                                        <template slot="header" slot-scope="scope">
                                            <div >
                                            <el-checkbox name="opt.itemId" @change="changeSubItem(opt)" v-model="opt.HasChecked" style="color:#909399;font-weight:bold">{{opt.itemName}}</el-checkbox>
                                            </div>
                                        </template>
                                        <template slot-scope="scope">
                                             <el-badge type='primary' v-bind:value="scope.row.OrderIndex" v-if="scope.row.HasChecked&&(scope.row.OrderIndex>1)"/>
                                            <el-badge  v-bind:value="scope.row.OrderIndex" v-if="scope.row.HasChecked&&(scope.row.OrderIndex==1)">
                                            </el-badge> 
                                            <el-checkbox :disabled="!opt.HasChecked" v-model="scope.row.HasChecked"  @change="SetOrderIndex(opt, scope.row)">{{scope.row.itemName}}</el-checkbox>
                                            <el-alert v-bind:title="scope.row.memo" v-if="scope.row.memo!=''"  type="info"></el-alert>
                                        </template>
                                    </el-table-column>
                                </el-table>
                        
                    </el-col>
                   </el-row>
               

				</div>
			</div>

	</div>
    
    <div id='editor' v-if='canEdit==true' style="margin: 5px;">
     <el-card class="box-card" style="margin-top:20px" >
  	    <EditorComponent v-model="Data.Title"  :Html="Data.Title" />
		<div class="radius" style="border-radius:2px; height:50px">
                           

		</div>
     
       <div>
           <el-input placeholder="请输入内容" v-model="Data.MaxSel">
                    <template slot="prepend">选择数量</template>
            </el-input>
       </div>
        <el-collapse  >
            <el-collapse-item  v-for="opt in Data.Options" v-bind:key="opt.itemId"  :name="opt.itemId">
                <template slot="title">

                <table>
                    <tr>
                        <td>
                             <div id='title-row' >
                                <el-input size="small"  @focus.stop="handleClick()" @input="handleClick()" @click.stop="handleClick()" v-model="opt.itemName" placeholder="请输入内容"></el-input>
                             </div>
                        </td>
                        <td>
                               <div style='display: inline-block;margin-top: 5px;'>
                                        <el-button type="warning" @click.stop="remove(opt.itemId)" size="mini" style='display: inline-block;' icon="el-icon-minus" circle></el-button>
                                        <el-button type="danger"  @click.stop="insert(opt.itemId)" size="mini" style='display: inline-block;'  icon="el-icon-plus" circle></el-button>
                                        <el-button  size="mini" style='display: inline-block;' @click.stop='moveUp(opt.itemId)' icon="el-icon-top" circle></el-button>
                                        <el-button  size="mini" style='display: inline-block;' @click.stop='moveDown(opt.itemId)' icon="el-icon-bottom" circle></el-button>
                                </div>
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
                </template>
                <div>
                    <el-button size="mini" style="float:right"  icon="el-icon-plus" @click="addSubItem(opt.itemId)" type="primary">添加子选项</el-button>
                    <el-table :fit="true" :data="opt.SubItems" style="width: 100%">
                    <el-table-column  label="选项文字" >
                    <template slot-scope="scope">
                        <div id='title-row' >
                            <el-input size="small" style='display: inline-block;'  v-model="scope.row.itemName" placeholder="请输入内容"></el-input>
                        </div>
                        </template>
                    </el-table-column>

                    <el-table-column  label="操作"  >
                            <template slot-scope="scope">
                                    <div style='display: inline-block;margin-top: 5px;'>
                                        <el-button type="primary" @click.stop="removeSubItem(opt.itemId, scope.row.itemId)" size="mini" style='display: inline-block;' icon="el-icon-minus" circle></el-button>
                                        <el-button type="primary"   @click.stop="insertSubItem(opt.itemId, scope.row.itemId)" size="mini" style='display: inline-block;'  icon="el-icon-plus" circle></el-button>
                                        <el-button type="primary"  size="mini" style='display: inline-block;' @click.stop='subItemMoveUp(opt.itemId, scope.row.itemId)' icon="el-icon-top" circle></el-button>
                                        <el-button type="primary"  size="mini" style='display: inline-block;' @click.stop='subItemMoveDown(opt.itemId, scope.row.itemId)' icon="el-icon-bottom" circle></el-button>
                                    </div>
                            </template>
                    </el-table-column>

                    <el-table-column  label="说明"  >
                        <template slot-scope="scope">
                        <el-input v-model="scope.row.memo" size="small" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                  </el-table>
                </div>
            </el-collapse-item>
      
        </el-collapse>

	    <BatchAddComponent v-model="msg" @getitem="itemNameArry" :itemnamearry="itemname" ></BatchAddComponent>
	     <el-button type="warning " style='margin-top:5px;width:100%' @click="canEdit=false">完成编辑</el-button>
	    </el-card>
		 </div>
		
	</div>
</template>

<script lang='ts'>
  
    import {Component, Vue, Watch, Prop } from 'vue-property-decorator'
    import RankAfterSelSubject,{RankAfterSelOption} from './ts/RankAfterSelSubject'
    import OrderBy,{OrderByTypes} from './ts/OrderByTypes'
    import TBaseQuestion from './ts/TBaseQuestion'
    import DataTypeSelector from './DataTypeSelector.vue'
    import EditorComponent from './EditorComponent.vue'
    import { QuestionDataTypes,QuestionTypes } from './ts/QuestionDataTypes';
	import OrderByComponent from './OderByComponent.vue';
    
    import BatchAddComponent from './BatchAddComponent.vue';
import RadioSelOption from './ts/RadioSelOption';
 @Component(
     {
         components:{EditorComponent,DataTypeSelector,OrderByComponent,BatchAddComponent}
     }
 )
	export  default class RankAfterSelComponent  extends TBaseQuestion<RankAfterSelOption,RankAfterSelSubject> {


      $name:string= 'RankAfterSelComponent'
       

      CheckedValues:Array<string>=[];

      options:RankAfterSelOption[]=[];
	  msg:string ="";
      gotMsg:string[]=[];
      
      itemname="";

     



      
	   @Watch('msg')
	    getstr(){
			this.gotMsg=this.msg.split('\n')
			this.gotMsg.forEach(element => {
			  if(element!=" "){
			    var opt =new RankAfterSelOption();
			    opt.itemName=element;
			    this.options.push(opt);
			  }
		    });
		    this.Data.Options=this.options;
			this.options=[];
			
       }
        //显示题目内容div
        
       //获取options中每一项的name
	    getOptionText():string{
			let options="";
			let n=this.Data.Options.length;
			for(let i=0;i<n;i++){
				if(i<(n-1)){
					options+=this.Data.Options[i].itemName+"\n";
				}else{
                    options+=this.Data.Options[i].itemName;
				}
			}
			return options;
			
        }
        

      constructor ()
      {
     
        super(RankAfterSelOption,RankAfterSelSubject);
       this.Data.QuestionType=QuestionTypes.qtSelRank;

        for(var i:number=0;i<5;++i)
          {
              var opt = new RankAfterSelOption();
              opt.itemName='选项'+i;
              this.Data.Options.push(opt);
          }
          
         
      }

    mounted()
    {
         super.mounted();
         this.initProps();

         console.info("component mounted!");
    }

      itemNameArry(){
        this.itemname=this.getOptionText();
      }

      //输入框内容改变
	   inputchange(){
		   this.msg=this.getOptionText();
	   }
	//删除选项
	remove(str:string):void{
		super.remove(str);
		this.msg=this.getOptionText();
	}

	//向上移动选项
	moveUp(id:string):void{
		super.moveUp(id);
		this.msg=this.getOptionText();
	}
	moveDown(id:string){
		super.moveDown(id);
		this.msg=this.getOptionText();
	}

      initOptions()
      {
           for(var i:number=0;i<5;++i)
          {
              var opt = new RankAfterSelOption();
              opt.itemName='选项'+i;
              this.Data.Options.push( opt);
          }

      }

     
   //插入选项
    insert(id:string):void
    {
        let options= this.Data.Options;
        options.splice(options.findIndex(item=>item.itemId===id)+1,0,this.createNewOption(RankAfterSelOption));
         this.msg=this.getOptionText();
        
    };

    insertSubItem(pId:string,id:string):void
    {
        let pOptions= this.Data.Options;
        var options=pOptions[pOptions.findIndex(item=>item.itemId===pId)].SubItems;
        let subItem=this.createNewOption(RankAfterSelOption);
        subItem.itemName="子选项"+(options.length+1);
        options.splice(options.findIndex(item=>item.itemId===id)+1,0,subItem);
    
        
    };
     getQuestionData():any
     {
         return this.Data;
     }

     setQuestionData(data:string)
     {
           
     };
     
     getMaxSel():number
     {
         return this.Data.Options.length;
     }

	 setTitle(txt:string):void
	 {
		
     }
     
    GetHtml(html:string):void
     {
         this.Data.Title=html;
     }

    SetOrderIndex(item:RankAfterSelOption,subItem:RankAfterSelOption):void
    {
         let options=item.SubItems;
         
         if(subItem.HasChecked)
         {
            subItem.OrderIndex=this.GetHasCheckedNum(item);
         }
         else
         {
            var itemOrder= subItem.OrderIndex;
            subItem.OrderIndex=0;

             
            for(var item of options)
            {
                if(item.HasChecked&&item.OrderIndex>itemOrder)
                    item.OrderIndex--;
                    
            }
         }
        
    }
   //取得已选择的数量
    GetHasCheckedNum(items:RankAfterSelOption):number
    {
        let num=0;

        for(var item of items.SubItems )
        {
            if(item.HasChecked)
                num++;
        }
        return num;
    }
 //添加子选项
    addSubItem(parentId:string)
    {
         let options= this.Data.Options;
         var opt=options[options.findIndex(item=>item.itemId===parentId)];
         let subItem=this.createNewOption(RankAfterSelOption);
         subItem.itemName="子选项"+(opt.SubItems.length+1);
         opt.SubItems.push(subItem);
    }
    //删除子选项
    removeSubItem(parentId:string,subItemId:string)
    {
          let options= this.Data.Options;
           var subItems=options[options.findIndex(item=>item.itemId===parentId)].SubItems;

          subItems.splice(options.findIndex(item => item.itemId ===subItemId), 1);
    }
    subItemMoveUp(pId:string, id:string):void
    {
         let pOptions= this.Data.Options;
         var options=pOptions[pOptions.findIndex(item=>item.itemId===pId)].SubItems;
      
        let index=options.findIndex(item=>item.itemId===id);
       
			if(index===0)
				return;
		
			var upObj= options[index-1];
			var moveObj= options[index];
			options.splice(index,1,upObj); //(索引，长度，值)
			options.splice(index-1,1,moveObj); //(索引，长度，值)
    };

    subItemMoveDown(pId:string,id:string)
    {
       let pOptions= this.Data.Options;
        var options=pOptions[pOptions.findIndex(item=>item.itemId===pId)].SubItems;
        var index=options.findIndex(item=>item.itemId===id);
			
			
			
			if(index===(options.length-1))
				return;
		
			var downObj= options[index+1];
			var moveObj= options[index];
			options.splice(index,1,downObj); //(索引，长度，值)
			options.splice(index+1,1,moveObj); //(索引，长度，值)
    }

    changeSubItem(item:RankAfterSelOption)
    {
        if(!item.HasChecked)
        {
            for(var sub of item.SubItems)
            {
                sub.OrderIndex=0;
                sub.HasChecked=false;
            }
        }
        else
        {
            var checkNum=0;
            for(var opt of this.Data.Options)
            {
                if(opt.HasChecked)
                {
                    checkNum++;
                }
            }
            if(checkNum>this.Data.MaxSel)
            {
                item.HasChecked=false;
            }
        }
    }

    handleClick():void
    {
        //alert('clicked');
        console.info('');
    }
	 
	 getanswer(id:string){
         return this.Data.answer;
     }
	}
</script>
 
<style>
.optionLayout{
                display: flex;
                display: -webkit-flex;
                border: 1px solid gainsboro;
                
                width: 100%;
                align-items:center;
                justify-content:left;
            }
.setting-table td{  text-align: center;vertical-align:middle;} table{ width: 100%;font-size: 14px;margin-top: 5px}

</style>
